<template>
  <el-dialog
    :visible="visible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="540px"
    align-center
    :lock-scroll="false"
  >
    <div class="text">{{ text }}</div>
    <div class="btns">
      <a class="btn" style="flex: 1;" @click="refresh">{{ btnText }}</a>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: 'Disconnected, mining device has stopped working.'
  },
  btnText: {
    type: String,
    default: 'Reconnected'
  }
})

const refresh = () => {
  window.location.reload(true)
}
</script>

<style lang="less" scoped>
.text {
  color: rgba(0, 246, 255, 0.7);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 30px;
  letter-spacing: 0.3px;
}

.btns {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;

  /deep/.btn{
    padding: 12px 25px;
    background: rgba(0, 246, 255, 0.05);
    border: 1px solid var(--border-normal);
    color: rgba(0, 246, 255, 0.95);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;

    &:hover {
      background: rgba(0, 246, 255, 0.08);
      border-color: var(--border-normal);
    }
  }
}
</style>
